<!-- Created by jack on 2022/4/15 - 15:23 -->
<style scoped lang="less">
.popup-box {
  position: absolute;
  bottom: 0;
  height: 0;
  left: 0;
  width: 100%;
  background: #fff;
  transition: height ease-in-out 300ms;
  //z-index: 1;
  &__head {
    height: 45px;
    width: 100%;
  }
}

.player-box {
  user-select: none;
  position: absolute;
  bottom: 0;
  height: 60px;
  left: 0;
  width: 100%;
  background: #fff;
  backdrop-filter: blur(100px);
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: row;
  //z-index: 1;

  &__info {
    flex: 1;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;

    &__cover {
      position: relative;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      cursor: pointer;
      margin-right: 10px;
      animation: play 5s infinite linear forwards paused;
    }

    &__row-1 {
      font-size: 14px;
      color: #333;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: row;

      &__title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
        word-break: break-all;
        word-wrap: break-word;
      }

      &__sub-title {
        max-width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 12px;
        color: #999;
        &__text{
          transition: all ease-in-out .3s;
          &:hover{
            cursor: pointer;
            color: red;
          }
          margin-left: 10px;
        }
      }
    }

    &__row-2 {
      font-size: 12px;
      color: #999;
    }
  }

  &__control {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    &__icon {
      padding: 10px;
      width: 20px;
      height: 20px;
      margin: 0 5px;

      &-color {
        border-radius: 50%;
        background: #d81e06;
      }

      &:active {
        opacity: 0.7;
      }
    }
  }

  &__sub-control {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    &__icon {
      padding: 10px;
      width: 16px;
      height: 16px;

      &-color {
        border-radius: 50%;
        background: #d81e06;
      }

      &:active {
        opacity: 0.7;
      }
    }
  }

  &__progress{
    top: 0;
    left:0;
    height: 4px;
    position: absolute;
  }
}

@keyframes play {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.play {
  animation-play-state: running;
}
</style>

<template>
  <!--  全屏弹窗  -->
  <div class="popup-box" :style="`height:${showDetail ? '100%': '0%'}`">
    <div class="popup-box__head" id="netEasyMusic-popup-header"/>
    <musicDetail />
  </div>
  <!-- 播放列表 -->
  <SongList />
  <!-- 底部常显  -->
  <div class="player-box">
    <!-- 进度条 -->
    <progressBar class="player-box__progress"
                 :isTimeFormat="true"
                 @update:value="netEasyMusicStore.setTime"
                 :max="playing.totalTime"
                 :value="playing.currentTime"
    />
    <!--  信息  -->
    <div class="player-box__info">
      <!--  封面  -->
      <img :src="playing.cover" @click="netEasyMusicStore.toggleShowDetail()" class="player-box__info__cover" :class="{ 'play': playing.isPlay }">
      <div style="flex: 1">
        <div class="player-box__info__row-1">
          <span class="player-box__info__row-1__title">{{ playing.title }}</span>
          <span class="player-box__info__row-1__sub-title">
              <span @click="handleClickSinger(ele)" v-for="(ele,index) of singer" :key="index" class="player-box__info__row-1__sub-title__text">{{ ele.name }}</span>
          </span>
        </div>
        <div class="player-box__info__row-2">{{ playing.currentTime }} / {{ playing.totalTime }}</div>
      </div>
    </div>
    <!-- 主控制 -->
    <div class="player-box__control">
      <img :src="iconPath.heart" class="player-box__control__icon">
      <img :src="iconPath.back" class="player-box__control__icon" @click="netEasyMusicStore.preMusic">
      <img :src="iconPath.play" class="player-box__control__icon player-box__control__icon-color" @click="netEasyMusicStore.togglePlay">
      <img :src="iconPath.next" class="player-box__control__icon" @click="netEasyMusicStore.nextMusic">
      <img :src="iconPath.lyric" class="player-box__control__icon">
    </div>
    <!-- 副控制   -->
    <div class="player-box__sub-control">
      <img :src="iconPath.loop" class="player-box__sub-control__icon" @click="netEasyMusicStore.changeLoop">
      <img src="../../icon/play-list.png" class="player-box__sub-control__icon" @click="netEasyMusicStore.setShowPlayList(true)">
      <pop-up v-model="showPopUp" :zIndex="10" :offset-y="20" :offset-x="2" style="display: flex;align-items: center">
        <template v-slot:ref><img src="../../icon/volumn.png" class="player-box__sub-control__icon"></template>
        <volumeBar :value="setting.volume" @update:value="netEasyMusicStore.changeVolume"/>
      </pop-up>
    </div>
  </div>
</template>

<script setup lang="ts">
// todo 组件
import popUp from '@/components/popUp'
import volumeBar from '../../components/volumeBar.vue'
import progressBar from '../../components/progressBar.vue'
import musicDetail from './musicDetail.vue'
// todo 资源
// @ts-ignore
import playIcon from '../../icon/play.png'
// @ts-ignore
import backIcon from '../../icon/back.png'
// @ts-ignore
import pauseIcon from '../../icon/pause.png'
// @ts-ignore
import nextIcon from '../../icon/next.png'
// @ts-ignore
import heartIcon from '../../icon/heart.png'
// @ts-ignore
import heartActiveIcon from '../../icon/heart-active.png'
// @ts-ignore
import lyricIcon from '../../icon/lyric.png'
// @ts-ignore
import lyricActiveIcon from '../../icon/lyric-active.png'
// @ts-ignore
import loop1Icon from '../../icon/loop-1.png'
// @ts-ignore
import loop2Icon from '../../icon/loop-2.png'
// @ts-ignore
import loop3Icon from '../../icon/loop-3.png'
// @ts-ignore
import loop4Icon from '../../icon/loop-4.png'
import SongList from '../../modules/index/songList.vue'
const loopIcon = [loop1Icon, loop2Icon, loop3Icon, loop4Icon] // 循环图标
// @ts-ignore
import music from '../../level.mp3'
// @ts-ignore
import music2 from '../../NeverBeAlone.mp3'
// todo 状态管理
import WindowStore from '@/components/window/src/store'
import netEasyMusicStore from '../../store'

const windowStore = WindowStore()
// todo 实例
import {computed, nextTick, onMounted, onUpdated, ref, watch} from "vue";
import {moveDom} from "@/helper";
// todo 数据
const playing = computed(() => netEasyMusicStore.$state.playing) // 播放信息
const setting = computed(() => netEasyMusicStore.$state.setting) // 播放器设置
const singer = computed(() => (playing.value?.ar?.map((ele:any) => ({name:ele.name,...ele})))??[])
const iconPath = computed(() => ({ // 播放器图标
  play: playing?.value?.isPlay ? pauseIcon : playIcon,
  next: nextIcon,
  back: backIcon,
  heart: heartIcon, // 需要接口
  lyric: setting.value?.lyric?.show ? lyricActiveIcon : lyricIcon,
  loop: loopIcon[setting.value?.loop ?? 0]
})) // 播放器图标
const showPopUp = ref(false) // 显示音量
const showDetail = computed(() => netEasyMusicStore.$state.showDetail) // 显示更多内容
/** 挂载 */
nextTick(() => {
  const openWindowList = windowStore.$state.openWindowList
  const id = Array.from(openWindowList).find((ele:any) => ele.includes('netEasyMusic'))
  moveDom('#netEasyMusic-popup-header', '#'+id)
})


// 交互

// 点击歌手
const handleClickSinger = (event:any) => {
  console.log(event)
}
</script>
